<template>
  <div id="app">
    <el-container>
      <aside-menu v-if="AsideMenushow"></aside-menu>
      <!-- 主体内容 -->
      <router-view ref='homePage'></router-view>
    </el-container>
    <!-- 用户登录头像 -->
    <div style="position: absolute;left: 0;bottom: 40px;">
      <div style="display: flex;flex-direction:column-reverse;align-items:center;width: 64px;" >
        <div class="logout" @click="logout">
          <i class="el-icon-switch-button"></i>
        </div>
        <el-avatar :size="40" :src="getpic" @click.native="checkLogin">
          <img src="/image/login.jpg" />
        </el-avatar>
      </div>
    </div>
  </div>
</template>

<script>
  import {getUserInfo,removeUserInfo} from '../api/cache.js';
  import AsideMenu from './AsideMenu.vue';
  export default {
    components: {
      AsideMenu
    },
    data() {
      return {
        AsideMenushow: true
      };
    },
    created() {
      //从本地缓存获取用户信息，根据角色判断是否追加菜单
      let userInfo = getUserInfo(null);
      if (userInfo) {
        this.$store.state.userInfo = userInfo;
      }
    },
    computed: {
      getpic() {
        return this.$store.state.userInfo.picture;
      }
    },
    methods: {
      logout(){
        removeUserInfo();
        this.$router.push('/login');
      },
      checkLogin() {
        let a = getUserInfo(null);
        if(a==null){
          //跳转到用户中心
          this.$router.push('/login');
        }else{
          //跳转到用户中心
          this.$router.push('/user');
        }
      },
      reload() {
        console.log('强制刷新子组件');
        this.AsideMenushow = false;
        this.$nextTick(function() {
          this.AsideMenushow = true;
        });
      }
    },
    provide() {
      return {
        reload: this.reload
      };
    }
  };
</script>

<style>
  body {
    margin: 0;
  }

  #app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .logout{
    font-size: 30px;
  }
</style>
